<template>
    <div id="serviceInformation">

        <ServiceInformationContentView typeName="电气类" v-show="active === '电气类'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="给排水类" v-show="active === '给排水类'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="疏通类" v-show="active === '疏通类'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="门窗类" v-show="active === '门窗类'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="安装类" v-show="active === '安装类'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="弱电类" v-show="active === '弱电类'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="保洁服务" v-show="active === '保洁服务'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="保安服务" v-show="active === '保安服务'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="绿化服务" v-show="active === '绿化服务'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="有害生物防制服务" v-show="active === '有害生物防制服务'"></ServiceInformationContentView>
        <ServiceInformationContentView typeName="生活垃圾收集处置" v-show="active === '生活垃圾收集处置'"></ServiceInformationContentView>

        <div class="vantabs-fixed">
            <van-tabs
                    @click="onClick"
                    :swipe-threshold=5
                    id="van-tabs"
                    color="#121C32"
                    line-width="1.333rem"
                    v-model="active"
            >
                <van-tab title="电气类" name="电气类"></van-tab>
                <van-tab title="给排水类" name="给排水类"></van-tab>
                <van-tab title="疏通类" name="疏通类"></van-tab>
                <van-tab title="门窗类" name="门窗类"></van-tab>
                <van-tab title="安装类" name="安装类"></van-tab>
                <van-tab title="弱电类" name="弱电类"></van-tab>
                <van-tab title="保洁服务" name="保洁服务"></van-tab>
                <van-tab title="保安服务" name="保安服务"></van-tab>
                <van-tab title="绿化服务" name="绿化服务"></van-tab>
                <van-tab title="有害生物防制服务" name="有害生物防制服务"></van-tab>
                <van-tab title="生活垃圾收集处置" name="生活垃圾收集处置"></van-tab>

            </van-tabs>
        </div>

    </div>
</template>

<script>
    import ServiceInformationContentView from './ServiceInformationContentView'

    export default {
        name: "ServiceInformation",
        data(){
            return {
                active: "电气类",
            }
        },
        components:{
            ServiceInformationContentView
        }
    }
</script>

<style scoped>

    #serviceInformation {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        overflow: auto;
        background-color: white;
    }

    .vantabs-fixed{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: white;
    }

    #van-tabs >>> .van-tab {
        color: #7a8491;
        font-family: "PingFangSC-Regular";
        font-size: 0.9333333333333333rem;
        font-size: 0.9333333333333333rem;
    }

    #van-tabs >>> .van-tab--active {
        color: #020433;
        font-family: "PingFangSC-Medium";
        font-size: 0.9333333333333333rem;
    }

</style>